// 懒加载的本质是import支持异步接口
// 加载的过程在then之后
// import('./math').then(math => {
//   console.log(math.add(1, 2))
// });


import React, { useState, useEffect } from 'react';

const LazyComponent = React.lazy(()=>import('./lazyComponent'));

const useLazyComponent: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const loadComponent = async () => {
      const response = await fetch('lazyComponent.js');
      const result = await response.text();
      setIsLoaded(true);
      return result;
    };

    if (!isLoaded) {
      loadComponent();
    }
  }, []);

  return isLoaded ? <div>Loaded </div> : <div>Loading...</div >;
};


const useLazyComponen2: React.FC = () => {
  return <div>
    <React.Suspense fallback="Loading...">
      <LazyComponent name="World"/>
    </React.Suspense>
  </div>
};

export default useLazyComponent;